<template>
  <view class="kd-withdrawal-page-wrap">
    <view class="withdrawal-wrap">
      <view class="withdrawal-content">
        <view class="withdrawal-top-text">提现到</view>

        <view class="withdrawal-list">
          <view class="withdrawal--item-wrap">
            <view class="withdrawal-target">
              <image class="logo" src="/static/image/wechat-pay.png"></image>
              <view class="name">微信零钱</view>
            </view>

            <view class="right-checkbox">
              <van-checkbox :value="select"></van-checkbox>
              <!--              @change="handleOnChangeSelectAll"-->
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="withdrawal-price-wrap">
      <view class="withdrawal-price">
        <view class="withdrawal-price-text">提现金额</view>

        <view class="withdrawal-input-wrap">
          <view class="withdrawal-input-content">
            <view class="left-symbol">￥</view>
            <view class="right-input-wrap">
              <input
                :value="val"
                class="withdrawal-input"
                maxlength="10"
                type="digit"
                @input="handleInputWithdrawalPrice"
              />
            </view>
          </view>
        </view>

        <view class="available-wrap">
          <view class="left">可提现金额:￥{{ canCarry }}</view>
          <view class="right" @click="handleAllWithdrawal">全部提现</view>
        </view>
      </view>
    </view>

    <view class="btn-wrap">
      <view
        class="btn"
        :class="btnDisabled ? 'disabled' : ''"
        @click="handleWithdrawal"
        >提现</view
      >
    </view>

    <van-dialog id="van-dialog" />

    <van-toast id="van-toast" />
  </view>
</template>

<script>
import Toast from "../../wxcomponents/vant/toast/toast";
const app = getApp();

export default {
  data() {
    return {
      select: true,
      canCarry: 0,
      val: "",
      btnDisabled: true,
    };
  },
  methods: {
    handleInputWithdrawalPrice(e) {
      const { value } = e.detail;
      const { canCarry } = this;
      let btnDisabled = true;
      const valMap = parseFloat(value);

      if (valMap > 0 && valMap <= parseFloat(canCarry)) {
        btnDisabled = false;
      }
      this.val = valMap;
      this.btnDisabled = btnDisabled;
    },

    handleAllWithdrawal() {
      const { canCarry } = this;

      if (!canCarry) {
        return;
      }
      this.val = canCarry;
      this.btnDisabled = false;
    },
    handleWithdrawal() {
      const { val } = this;

      if (!val) {
        Toast("请输入提现金额");
        return;
      }

      Toast.loading({
        message: "加载中",
        mask: true,
        duration: 0,
        zIndex: 9999999,
        forbidClick: true,
      });

      app
        .request(
          {
            money: val,
          },
          "/api/logistics/express/add_withdraw"
        )
        .then((res) => {
          console.log(res);
          const { code, data, msg } = res;

          if (code === 1) {
            Toast("操作成功");

            setTimeout(() => {
              uni.navigateBack();
            }, 1000);
          } else {
            Toast(msg);
          }
        });
    },
  },
  onLoad(res) {
    const { money } = res;

    this.canCarry = parseFloat(money) || 0;
  },
};
</script>

<style lang="scss">
.kd-withdrawal-page-wrap {
  min-height: 100vh;
  background-color: #f5f5f5;

  .withdrawal-wrap {
    width: 100%;
    padding: 24rpx;
    box-sizing: border-box;

    .withdrawal-content {
      width: 100%;
      height: 200rpx;
      background-color: #fff;
      border-radius: 6px;
      padding-left: 40rpx;
      padding-right: 12rpx;
      box-sizing: border-box;

      .withdrawal-top-text {
        color: rgba(51, 51, 51, 100);
        font-size: 32rpx;
        font-family: PingFangSC-Regular;
        padding-top: 40rpx;
      }

      .withdrawal-list {
        .withdrawal--item-wrap {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          height: 112rpx;
          padding-right: 16rpx;
          box-sizing: border-box;

          .withdrawal-target {
            display: flex;
            align-items: center;

            .logo {
              width: 44rpx;
              height: 44rpx;
              margin-right: 14rpx;
            }

            .name {
              color: rgba(51, 51, 51, 100);
              font-size: 32rpx;
              font-family: PingFangSC-Regular;
            }
          }

          .right-checkbox {
          }
        }
      }
    }
  }

  .withdrawal-price-wrap {
    width: 100%;
    padding: 0 24rpx;
    box-sizing: border-box;

    .withdrawal-price {
      width: 100%;
      height: 308rpx;
      background-color: #fff;
      border-radius: 6px;

      .withdrawal-price-text {
        width: 100%;
        padding-left: 40rpx;
        padding-top: 40rpx;
        color: rgba(51, 51, 51, 100);
        font-size: 32rpx;
        font-family: PingFangSC-Regular;
      }
    }

    .withdrawal-input-wrap {
      width: 100%;
      padding: 0 38rpx;
      box-sizing: border-box;
      margin-top: 66rpx;

      .withdrawal-input-content {
        width: 100%;
        padding-bottom: 10rpx;
        border-bottom: 1px solid #f5f5f5;
        display: flex;
        align-items: center;

        .left-symbol {
          color: rgba(51, 51, 51, 100);
          font-size: 36rpx;
          font-family: PingFangSC-Regular;
          margin-right: 12rpx;
        }

        .right-input-wrap {
          .withdrawal-input {
            color: rgba(51, 51, 51, 100);
            font-size: 40rpx;
            font-family: PingFangSC-Medium;
          }
        }
      }
    }

    .available-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 92rpx;
      padding: 0 38rpx;
      box-sizing: border-box;

      .left {
        color: rgba(153, 153, 153, 100);
        font-size: 30rpx;
        font-family: PingFangSC-Regular;
      }

      .right {
        color: rgba(38, 139, 255, 100);
        font-size: 30rpx;
        font-family: PingFangSC-Regular;
      }
    }
  }

  .btn-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 80rpx;

    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 682rpx;
      height: 96rpx;
      border-radius: 24px;
      background-color: rgba(38, 139, 255, 1);
      color: rgba(255, 255, 255, 100);
      font-size: 34rpx;
      font-family: PingFangSC-Regular;
    }

    .disabled {
      opacity: 0.5;
    }
  }
}
</style>
x
